<template>
	<view>
		<view class="shopimg">
			<image :src="$fun.imgUrl(infoList.images)" mode=""></image>
		</view>
		<view class="backimg" @click="back">
			<view class="" :style="'height: '+statusBarHeight+'px;'"></view>
			<image src="../../static/back2@2x.png" mode=""></image>
		</view>
		<view class="money"> <text>￥</text> {{infoList.money}}</view>
		<view class="shopname">{{infoList.name}} {{infoList.title}}</view>
		<view class="shopItem">
			<view class="item">
				<view class="istext"></view>
				<view class="">正品保障</view>
			</view>
			<view class="item">
				<view class="istext"></view>
				<view class="">极速退款</view>
			</view>
		</view>
		<view class="isline"></view>
		<view class="address">
			<view class="address_name">发货地</view>
			<view class="address_text">
				<image src="../../static/address@2x.png" mode=""></image>
				<view class="">河南郑州</view>
			</view>
		</view>
		<view class="isline"></view>
		<view class="address1">
			<view class="name">商品详情</view>
			<view class="htmlclo" v-html="infoList.content"></view>
		</view>
		<view class="shopcar">
			<view class="shopcar_go" @click="$fun.jump(`/pageB/noticeList/noticeInfo?name=在线客服&type=13`)">
				<image src="../../static/kefu.png" mode=""></image>
				<view class="">客服</view>
			</view>
			<!-- <view class="shopcar_go" @click="$fun.jump('./shopcar')">
				<image src="../../static/shopcar2@2x.png" mode=""></image>
				<view class="">购物车</view>
			</view> -->
			<view class="shopcar_btn">
				<!-- <view class="left" @click="showmodel=true,isadd=1">加入购物车</view> -->
				<view class="right" @click="showmodel=true">立即购买</view>
			</view>
		</view>
		<u-popup :show="showmodel" mode="bottom" :zIndex='zIndex' :round="12" @close="showmodel=false,isadd=0"
			@open="open">
			<view class="showmodel">
				<view class="showmodel_top">
					<view class="left">
						<image :src="$fun.imgUrl(infoList.image)" mode=""></image>
						<view class=""> <text>￥</text>{{infoList.money}}</view>
					</view>
					<image src="../../static/guanbi.a2efebd2.png" @click="showmodel=false,isadd=0" mode="">
					</image>
				</view>
				<view class="isline"></view>
				<view class="showmodel_address" v-if="isadd==0" @click="$fun.jump('/pageA/address/address?source=1')">
					<view class="left">收货地址</view>
					<view class="right">
						<view class="">
							<view class="">{{addressData.address}}</view>
							<view class="">{{addressData.area}}</view>
							<view class="">{{addressData.name}} {{addressData.phone}}</view>
						</view>
					</view>
					<view class="right">
						<image src="../../static/goin.png" mode=""></image>
					</view>
				</view>
				<view class="isline"></view>
				<view class="showmodel_num">
					<view class="">数量</view>
					<view class="">
						<u-number-box min='1' v-model="goodsnum" button-size="26" @change="valChange"></u-number-box>
					</view>
				</view>
				<view class="isline"></view>
				<!-- <view class="showmodel_size">
					<view class="name">选择规格</view>
					<scroll-view scroll-y="true" style="height: 500rpx;">
						<view class="slist">
							<image src="../../static/nav(1).png" mode=""></image>
							<view class="" style="width: 590rpx;">水动力护肤补水保湿控油洁面爽肤水 100ml</view>
						</view>
						<view class="slist">
							<image src="../../static/nav(1).png" mode=""></image>
							<view class="" style="color: #999999;width: 590rpx;">水动力护肤补水保湿控油洁面爽肤水水动力护肤补水保湿控油洁面爽肤水 100ml
							</view>
							<view class="rtop">缺货</view>
						</view>
					</scroll-view>
				</view> -->
				<view class="isbtn">
					<view class="ispay" v-if="isadd==0">
						<view class="left">
							<view class="">小计</view>
							<view class="num"> <text>￥</text>{{allmoney}} </view>
						</view>
						<view class="rbtn" @click="submit">立即支付￥{{allmoney}}</view>
					</view>
					<view class="radd" v-else>加入购物车</view>
				</view>
			</view>
		</u-popup>
		<showpayVue ref="child" :showpaymodel="showpaymodel" :oid='oid' @showpaybtn="showpaybtn"></showpayVue>
	</view>
</template>

<script>
	import showpayVue from './showpay.vue';
	export default {
		components: {
			showpayVue
		},
		data() {
			return {
				statusBarHeight: 0,
				showmodel: false,
				showpaymodel: false,
				value: 1,
				zIndex: 10075,
				showpaw: false,
				isadd: 0,
				payvalue: '',
				infoList: {
					money: 0
				},
				imageList: [],
				allmoney: 0,
				goodsnum: 1, // 商品数量
				addressData: {
					address: '',
					area: '',
					name: '',
					phone: ''
				},
				addressData1: {
					address: '',
					area: '',
					name: '',
					phone: ''
				},
				memo: '',
				ids: '', //// 商品id
				payType: '',
				payTypeList: [],
				oid: ''
			}
		},
		onLoad(option) {
			const phoneInfo = uni.getSystemInfoSync();
			this.statusBarHeight = phoneInfo.statusBarHeight
			this.ids = option.id
			this.$fun.ajax.post('goods/index', {
				id: option.id
			}).then(res => {
				// console.log(res)
				this.infoList = res.data
				let arr = res.data.images.split(',')
				let arr1 = []
				for (var i = 0; i < arr.length; i++) {
					arr1.push({
						src: this.$fun.imgUrl(arr[i]),
						id: i
					})
				}
				this.imageList = arr1
				this.allmoney = this.goodsnum * this.infoList.money
			})
		},
		onShow() {
			let addressData = uni.getStorageSync('addressData')
			if (addressData) {
				this.addressData = JSON.parse(addressData)
				uni.removeStorageSync('addressData')
			}
			let addressData1 = uni.getStorageSync('addressData1')
			if (addressData1) {
				this.addressData1 = JSON.parse(addressData1)
				uni.removeStorageSync('addressData1')
			}
		},
		methods: {
			showpaybtn(showpaymodel) {
				this.showpaymodel = showpaymodel
				this.zIndex = 10075
			},
			back() {
				uni.navigateBack()
			},
			open() {

			},
			open1() {

			},
			valChange(res) {
				this.goodsnum = res.value
				this.allmoney = this.goodsnum * this.infoList.money
			},
			submit() {
				uni.showLoading({
					title: '',
				})
				if (this.addressData.name == '') {
					this.$fun.msg('请先选择或添加地址!')
					return
				}
				let prams = {
					addrid: '',
					ids: this.ids,
					nums: this.goodsnum,
					memo: this.memo
				}
				prams.addrid = this.addressData.id || this.addressData1.id
				this.disabled = true
				this.$fun.ajax.post('order/create', {
					...prams
				}).then(res => {
					this.disabled = false
					if (res.code == 1) {
						setTimeout(() => {
							this.showmodel = false
							this.showpaymodel = true
							this.zIndex = 0
							uni.hideLoading()
						}, 1000)
						this.oid = res.data.oid
						this.$refs.child.getorder(this.oid);
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	.shopimg {
		position: relative;

		image {
			width: 750rpx;
			height: 750rpx;
		}
	}

	.htmlclo {

		/deep/ .MsoNormal img {
			width: 690rpx !important;
		}
	}

	.backimg {
		position: fixed;
		top: 10rpx;
		left: 30rpx;

		image {
			width: 64rpx;
			height: 64rpx;
			opacity: 0.5;
		}
	}

	.money {
		font-weight: 600;
		font-size: 48rpx;
		color: #ED4961;
		margin: 30rpx 30rpx 20rpx;

		text {
			font-size: 28rpx;
		}
	}

	.shopname {
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		margin: 0 30rpx;
	}

	.shopItem {
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
		display: flex;
		margin: 20rpx 30rpx 30rpx;

		.item {
			display: flex;
			align-items: center;
			margin-right: 67rpx;
		}

		.istext {
			width: 12rpx;
			height: 12rpx;
			background: #999999;
			margin-right: 10rpx;
			border-radius: 50%;
		}
	}

	.isline {
		width: 750rpx;
		height: 16rpx;
		background: #F5F1EE;
	}

	.address {
		display: flex;
		height: 88rpx;
		align-items: center;
		margin: 0 30rpx;

		&_name {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin-right: 90rpx;
		}

		&_text {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;

			image {
				width: 23rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
		}
	}

	.address1 {
		width: 750rpx;
		padding: 30rpx 30rpx 100rpx;
		box-sizing: border-box;

		.name {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.shopcar {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		padding: 0 30rpx 0 60rpx;

		&_go {
			font-weight: 400;
			font-size: 20rpx;
			color: #333333;
			text-align: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		&_btn {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;

			.left {
				width: 204rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #423831;
				border-radius: 42rpx 0rpx 0rpx 42rpx;
			}

			.right {
				width: 204rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #FB6C04;
				// border-radius: 0rpx 42rpx 42rpx 0rpx;
				border-radius: 42rpx;
			}
		}
	}

	.showmodel {
		width: 750rpx;
		min-height: 620rpx;
		max-height: 1152rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;

		&_top {
			display: flex;
			justify-content: space-between;
			margin: 30rpx;



			.left {
				font-weight: 600;
				font-size: 48rpx;
				color: #0066FF;
				display: flex;
				align-items: center;

				text {
					font-size: 28rpx;
				}

				image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
				}
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		&_paytop {
			width: 750rpx;
			height: 88rpx;
			border-radius: 1rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			.payname {
				font-weight: 600;
				font-size: 32rpx;
				color: #19181A;
			}
		}

		&_paylsit {
			width: 690rpx;
			height: 100rpx;
			background: #F6F6F6;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #19181A;
			margin: 30rpx 30rpx;
			padding-left: 22rpx;
			position: relative;

			.rtop {
				width: 100rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				background: #CCCCCC;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				position: absolute;
				top: -14rpx;
				right: 0;
			}

			image {
				width: 42rpx;
				height: 42rpx;
				margin-right: 22rpx;
			}

			.mleft {
				display: flex;
				align-items: center;

				.ism {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-left: 10rpx;
				}
			}
		}

		.isline {
			width: 750rpx;
			height: 16rpx;
			background: #F5F1EE;
		}

		&_address {
			display: flex;
			height: 156rpx;
			justify-content: space-between;
			align-items: center;
			margin: 0 30rpx;

			.left {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			.right {
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		&_num {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			display: flex;
			justify-content: space-between;
			margin: 40rpx 30rpx;
		}

		&_size {
			margin: 30rpx;

			.name {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			.slist {
				display: flex;
				align-items: center;
				padding: 6rpx 0;
				margin-top: 20rpx;
				position: relative;

				.rtop {
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					width: 60rpx;
					height: 28rpx;
					line-height: 28rpx;
					text-align: center;
					background: #CCCCCC;
					border-radius: 10rpx;
					position: absolute;
					top: -14rpx;
					right: 0;
				}

				image {
					width: 52rpx;
					height: 52rpx;
					margin-left: 6rpx;
					margin-right: 12rpx;

				}

				width: 690rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
			}
		}


		.isbtn {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 98rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 0 30rpx;

			.ispay {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.left {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 28rpx;
				display: flex;
				align-items: center;

				.num {
					font-weight: 600;
					font-size: 48rpx;
					color: #0066FF;
					margin-left: 10rpx;

					text {
						font-size: 28rpx;
					}
				}
			}

			.rbtn {
				width: 360rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #0066FF;
				border-radius: 36rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.radd {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				width: 690rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #0066FF;
				border-radius: 36rpx;
			}

		}
	}
</style>